<template>
  <div class="dialog">
    <el-select v-model="selectedSkinUid" class="select-skin" popper-class="canvas-select-list" @change="selectSkin">
      <el-option v-for="(item, key) in skin" :key="key" :label="item.name" :value="item.uid" />
    </el-select>
    <el-form ref="configJsonForm" :model="info" label-width="10rem">
      <el-form-item
        v-for="(item, key) in currentSkin"
        :key="key"
        :label="item.info_name"
      >
        <el-switch v-if="display[item.info_id] && display[item.info_id].bool" v-model="item.value" active-value="true" inactive-value="false" @change="change($event,item.info_id)" />
        <el-select v-else-if="display[item.info_id] && display[item.info_id].list" v-model="item.value" popper-class="canvas-select-list" @change="change($event,item.info_id)">
          <el-option v-for="option in infoset.filter(i => i.info_uid === item.info_uid)" :key="option.uid" :value="option.value" :label="option.name" />
        </el-select>
        <el-input v-else v-model="item.value" auto-complete="off" :readonly="display[item.info_id] && display[item.info_id].style" />
        <el-color-picker v-if="display[item.info_id] && display[item.info_id].style" v-model="item.value" @active-change="change($event,item.info_id)" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="cancel('configJsonForm')">取 消</el-button>
    </div>
  </div>
</template>
<script>
import { mapState, mapGetters } from 'vuex'
export default {
  name: 'EditCanvasModel',
  props: {
    submit: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      active: '0',
      defaultinput: '---请输入---',
      currentSkin: null,
      selectedSkinUid: null,
      formrules: {
        name: [
          { required: true, message: '请输入名称' }
        ],
        id: [
          { required: true, message: '请输入身份标识' }
        ],
        value: [
          { required: true, message: '请输入属性值' }
        ]
      }
    }
  },
  computed: {
    ...mapState({
      service: state => state.service,
      infoset: state => state.systemProfile.infoset,
      display: state => state.systemProfile.display,
      skin: state => state.systemProfile.skin
    }),
    ...mapGetters('systemProfile', [
      'defaultSkin'
    ]),
    info() {
      return this.currentSkin
        ? this.currentSkin.reduce((result, item) => ({ ...result, [item.info_id]: item.value }), {})
        : {}
    }
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      this.selectedSkinUid = this.defaultSkin ? this.defaultSkin.uid : null
      this.currentSkin = this.defaultSkin ? (this.defaultSkin.infolist ? this.defaultSkin.infolist : null) : null
    },
    selectSkin() {
      const currentSkin = this.$store.state.systemProfile.skin.find(item => item.uid === this.selectedSkinUid)
      this.currentSkin = currentSkin ? currentSkin.infolist : null
      this.submit(this.info)
    },
    change(value, data) {
      this.info[data] = value.trim()
      this.submit(this.info)
    },
    cancel(form) {
      // 重置表单内容
      this.$refs[form].resetFields()
      this.$emit('cancel')
    }
  }
}
</script>
<style>
.canvas-select-list {
  background-color: rgba(0,0,0,0.8);
  border: 1px solid rgba(228,231,237,0.8);
}
.canvas-select-list .el-select-dropdown__item.hover,
.canvas-select-list .el-select-dropdown__item:hover {
  background-color: transparent;
}
.canvas-select-list .popper__arrow::after{
  border-bottom-color: rgba(0,0,0,.5) !important;
}
</style>
<style scoped>
.dialog {
  max-height: 30rem;
  overflow: auto;
}
.dialog::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: transparent;
}
.dialog::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
  border-radius: 10px;
  background: rgba(237,237,237,0.5);
}
.dialog::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
  background: #535353;
}
.select-skin {
  width: 100%;
  margin-bottom: 1rem;
}
</style>
